<template>
  <div class="body">
      <div>
        <van-nav-bar
        :title="title"
        :left-arrow='icon'
        @click-left="onClickLeft"
        :fixed=true
        :border=false
        />
    </div>

    <div class="collapse">
      科研
      <div class="list">

          <van-collapse v-model="activeName" accordion>
            <div class="box" v-for="(item, index) in jiXiaoData.jiXiaoTitle" :key="index">
              <div class="ceBian">
                <div class="blue"></div>
                <div class="you">
                  <van-collapse-item :name="index">
                    <div slot="title">
                      <div class="itemTitle">标题：{{item.标题}}</div>
                      <div class="xiangQing">详情</div>
                      <div class="buXi">类别：{{item.cate}} </div>
                    </div>
                    <div class="jiXiaoTitle">选择月份</div>
                    <div>
                      
                    </div>
                  </van-collapse-item>
                </div>
              </div>
            </div>

          </van-collapse>

        </div>
    </div>

  </div>
</template>

<script>
import NavBar from '@/NavBar/navBar'
export default {
    name: 'Month',
    components: {
    NavBar,
  },
  props: {
    title: String,
    icon: Boolean,
    jiXiaoData: Object
  },
  data () {
    return {
      activeName: '0',
      教学工作业绩:['教学团队立项','精品资源课程验收','教改项目','教学资源库验收'],
      教研科研业绩:['纵向科研项目','纵向横向到账经费','横向技术及培训服务项目','发明专利','软件著作权','技术转让','发表论文','可行性研究报告','教程撰写','学术著作'],
      个人奖惩业绩:['科研奖励','教学成功奖励','教学荣誉称号','教师技能比赛获奖','指导学生技能竞赛获奖','指导学生创新创业比赛获奖'],
      个人业绩:['中层正职干部个人业绩','正副党总支书记个人业绩','正高教工个人业绩'],
      教学工作业绩Data:[],
      教研科研业绩Data:[],
      个人奖惩业绩Data:[]
    }
  },
  mounted() {
    this.getDataSort();
  },
  methods: {
    onClickLeft() {
        this.$emit('backUp')
    },
    //获取分类
    getDataSort() {
      var data = this.jiXiaoData.jiXiaoTitle
      console.log(data);
      data.forEach(el => {
        if (el.cate == '教学团队立项' || el.cate == '精品资源课程验收' || el.cate == '教改项目' || el.cate == '教学资源库验收') {
          this.教学工作业绩Data.push(el)
        }
        if (el.cate == '纵向科研项目' || el.cate == '纵向横向到账经费' || el.cate == '横向技术及培训服务项目' || el.cate == '发明专利' || el.cate == '软件著作权' || el.cate == '技术转让' || el.cate == '发表论文' || el.cate == '可行性研究报告' || el.cate == '教程撰写' || el.cate == '学术著作') {
          this.教研科研业绩Data.push(el)
        }
        if (el.cate == '科研奖励' || el.cate == '教学成功奖励' || el.cate == '教学荣誉称号' || el.cate == '教师技能比赛获奖' || el.cate == '指导学生技能竞赛获奖' || el.cate == '指导学生创新创业比赛获奖') {
          this.个人奖惩业绩Data.push(el)
        }
      });
      console.log(this.教学工作业绩Data,this.教研科研业绩Data,this.个人奖惩业绩Data);
      

      
    }
  }
    
}
</script>

<style scoped>
.body{
  overflow: hidden;
  }
.van-nav-bar{
    background-color:#1C5697;
  }
  .van-nav-bar__title{
    color: white;
  }
  .van-nav-bar__text{
    color: white;
  }
  .van-icon{
    color: white;
  }
  .van-nav-bar__text{
    background-color: #1C5697
  }

  .collapse{
    margin-top: 55px;
  }
.box{
  margin-bottom: 0.6rem;
  margin-left: 15px;
}
.ceBian{
  display: flex
}
.blue{
  background: rgb(85, 143, 250);
  width: 10px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.you{
  width: 100%
}
.itemTitle{
  width: 80%;
  font-weight: bold;
  font-size: 0.9rem;
  height: 72px;
}
.xiangQing{
  color: rgb(85, 143, 250);
  float: right;
}
.buXi{
  font-size: 0.8rem;
  color: rgb(161, 159, 159);
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap; width: 20em;
}
</style>


